<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./assets/img/favicon.png" type="image/x-icon">
  <link href="//cdn.jsdelivr.net/npm/remixicon@3.0.0/fonts/remixicon.css" rel="stylesheet">
  <title>portfolio website</title>
  <link rel="stylesheet" href="./assets/css/styles.css">
</head>

<body>
  <!-- 头部 -->
  <div class="header profile container">
    <!-- Theme button -->
    <i class="ri-moon-line change-theme" id="theme-button"></i>

    <div class="profile-container grid">
      <div class="profile-data">
        <div class="profile-border">
          <div class="profile-perfil">
            <!-- Insert your image, according to the example size of the portfolio -->
            <img src="assets/img/perfil.png" alt="">
          </div>
        </div>

        <h2 class="profile-name">Gianell Vusy</h2>
        <h3 class="profile-profession">Web developer</h3>

        <ul class="profile-social">
          <a href="https://www.instagram.com/" target="_blank" class="profile-social-link">
            <i class="ri-instagram-line"></i>
          </a>
          <a href="https://www.linkedin.com/" target="_blank" class="profile-social-link">
            <i class="ri-linkedin-box-line"></i>
          </a>
          <a href="https://github.com/" target="_blank" class="profile-social-link">
            <i class="ri-github-line"></i>
          </a>
        </ul>
      </div>

      <div class="profile-info grid">
        <div class="profile-info-group">
          <h3 class="profile-info-number">7</h3>
          <p class="profile-info-description">
            Years of <br> work
          </p>
        </div>
        <div class="profile-info-group">
          <h3 class="profile-info-number">+124</h3>
          <p class="profile-info-description">
            Completed <br> projects
          </p>
        </div>
        <div class="profile-info-group">
          <h3 class="profile-info-number">96</h3>
          <p class="profile-info-description">Satisfied <br> customers</p>
        </div>
      </div>

      <div class="profile-buttons">
        <!-- Insert your CV -->
        <a download="" href="./assets/pdf/Gianell-Cv.pdf" class="button">
          Download CV <i class="ri-download-line"></i>
        </a>

        <div class="profile-buttons-small">
          <!-- Insert a real number plus country code -->
          <a href="https://api.whatsapp.com/send?phone=51123456789&text=Hello, more information!" target="_blank"
            class="button button-small button-gray">
            <i class="ri-whatsapp-line"></i>
          </a>
          <!-- Insert your brand name or profile -->
          <a href="https://m.me/bedimcode" target="_blank" class="button button-small button-gray">
            <i class="ri-messenger-line"></i>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- 主体 -->
  <main class="main">
    <section class="filters container">
      <!--=============== FILTERS TABS ===============-->
      <ul class="filters-content">
        <button class="filters-button filter-tab-active" data-target="#projects">
          Projects
        </button>
        <button class="filters-button" data-target="#skills">
          Skills
        </button>
      </ul>

      <div class="filters-sections">
        <!--=============== PROJECTS ===============-->
        <div class="projects-content grid filters-active" data-content id="projects">
          <article class="projects-card">
            <!-- Insert your image in a rectangular format (Ex: 600 x 400, 1000 x 800, 1200 x 1000, etc) -->
            <img src="./assets/img/project1.jpg" alt="" class="projects-img">

            <div class="projects-modal">
              <div>
                <span class="projects-subtitle">Web</span>
                <h3 class="projects-title">Payment Site</h3>
                <a href="#" class="projects-button button button-small">
                  <i class="ri-link"></i>
                </a>
              </div>
            </div>
          </article>

          <article class="projects-card">
            <img src="./assets/img/project2.jpg" alt="" class="projects-img">

            <div class="projects-modal">
              <div>
                <span class="projects-subtitle">Web</span>
                <h3 class="projects-title">Portfolio website</h3>
                <a href="#" class="projects-button button button-small">
                  <i class="ri-link"></i>
                </a>
              </div>
            </div>
          </article>

          <article class="projects-card">
            <img src="./assets/img/project3.jpg" alt="" class="projects-img">

            <div class="projects-modal">
              <div>
                <span class="projects-subtitle">Movil</span>
                <h3 class="projects-title">Fast food app</h3>
                <a href="#" class="projects-button button button-small">
                  <i class="ri-link"></i>
                </a>
              </div>
            </div>
          </article>

          <article class="projects-card">
            <img src="./assets/img/project4.jpg" alt="" class="projects-img">

            <div class="projects-modal">
              <div>
                <span class="projects-subtitle">Movil</span>
                <h3 class="projects-title">Travel app</h3>
                <a href="#" class="projects-button button button-small">
                  <i class="ri-link"></i>
                </a>
              </div>
            </div>
          </article>

          <article class="projects-card">
            <img src="./assets/img/project5.jpg" alt="" class="projects-img">

            <div class="projects-modal">
              <div>
                <span class="projects-subtitle">Design</span>
                <h3 class="projects-title">Music app design</h3>
                <a href="#" class="projects-button button button-small">
                  <i class="ri-link"></i>
                </a>
              </div>
            </div>
          </article>
        </div>

        <!--=============== SKILLS ===============-->
        <div class="skills-content grid" data-content id="skills">
          <div class="skills-area">
            <h3 class="skills-title">Frontend Developer</h3>

            <div class="skills-box">
              <div class="skills-group">
                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">HTML</h3>
                    <span class="skills-level">Basic</span>
                  </div>
                </div>

                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">CSS</h3>
                    <span class="skills-level">Advanced</span>
                  </div>
                </div>

                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">JavaScript</h3>
                    <span class="skills-level">Intermediate</span>
                  </div>
                </div>
              </div>

              <div class="skills-group">
                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">React</h3>
                    <span class="skills-level">Intermediate</span>
                  </div>
                </div>

                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">Bootstrap</h3>
                    <span class="skills-level">Intermediate</span>
                  </div>
                </div>

                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">Git</h3>
                    <span class="skills-level">Intermediate</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="skills-area">
            <h3 class="skills-title">Backend Developer</h3>

            <div class="skills-box">
              <div class="skills-group">
                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">PHP</h3>
                    <span class="skills-level">Intermediate</span>
                  </div>
                </div>

                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">MySQL</h3>
                    <span class="skills-level">Advance</span>
                  </div>
                </div>

                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">Firebase</h3>
                    <span class="skills-level">Intermediate</span>
                  </div>
                </div>
              </div>

              <div class="skills-group">
                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">Python</h3>
                    <span class="skills-level">Basic</span>
                  </div>
                </div>

                <div class="skills-data">
                  <i class="ri-checkbox-circle-line"></i>

                  <div>
                    <h3 class="skills-name">Node Js</h3>
                    <span class="skills-level">Intermediate</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 底部 -->
  <footer class="footer container">
    <span class="footer-copy">
      &#169; Jetwang. All rigths reserved
    </span>
  </footer>

  <script src="./assets/js/scrollreveal.min.js"></script>
  <script src="./assets/js/main.js"></script>
</body>

</html>